<template>
<!--  可视化页面编辑   -->
  <div class="container page-detail">
   <el-row :gutter="20">
     <el-col :span="6">
       <div style="padding: 5px;background-color: rgb(242, 246, 252);overflow: scroll;height: 100vh;overflow-x: hidden; ">
         <div>
           <el-select v-model="selectModule" placeholder="选择组件">
             <el-option  v-for="item in modules" :key="item.id" :label="item.name" :value="item.id"/>
           </el-select>
           <el-button type="primary" @click="handlerAddModule(selectModule)">添加</el-button>
           <el-button type="warning" @click="$api.confirm('确定要返回吗?你修改的数据不做保存').then(()=>$api.back())">返回</el-button>

         </div>
         <ul class="module">
           <li v-for="(item,index) in data.list" :key="index" :class="{item:true,current:selectIndex===index}" >
             <div @click="handlerSelectItem(item,index)" style="display: flex">
               <div class="sort">
                 <p style=" padding: 0 0 5px 0; margin: 0; text-align: center; font-size: small;">排序</p>
                 <el-input v-model="item.sort" type="number" @change="handlerModuleSort"/>
               </div>
               <div class="name" >
                 <p style="margin: 0px;height: 16px;" >{{ item.module?item.module.name:' ' }}</p>
                 <el-input value="组件名字" v-model="item.name" />
               </div>
             </div>
             <div class="remove" @click="$delete(data.list,index)"><i class="el-icon-delete"></i></div>
           </li>
         </ul>
       </div>
     </el-col>
     <el-col :span="18">
       <el-form style=" height: 100vh; overflow-y: scroll; " label-width="180px">
         <div class="page-top">
           <el-form-item label="页面名称" label-width="80px">
             <el-input v-model="data.pageName"/>
           </el-form-item>
           <el-form-item label="页面介绍" style="width: 80%" label-width="80px">
             <el-input v-model="data.body"/>
           </el-form-item>
           <el-form-item>
           <el-button type="primary" @click="handleSubmit">保存</el-button>
           </el-form-item>
         </div>
          <div v-if="selectIndex>=0">
            <div v-for="(item,index) in module.module.list" :key="index">
<!--           start     number/text-->
              <el-form-item :label="item.text" v-if="item.type=='NUMBER'||item.type=='STRING'||item.type=='URL'">
                <el-input v-model="module.data[item.variable]"
                          :type="item.type=='NUMBER'?'number':'text'"/>
              </el-form-item>
<!--           end number/text-->
<!--              start   boolean-->
              <el-form-item :label="item.text" v-if="item.type=='BOOLEAN'">
                <el-switch  v-model="module.data[item.variable]" active-color="#13ce66" inactive-color="#ff4949"/>
              </el-form-item>
<!--              end boolean-->
<!--              start   color-->
              <el-form-item :label="item.text" v-if="item.type=='COLOR'">
                <el-color-picker v-model="module.data[item.variable]"></el-color-picker>
              </el-form-item>
<!--             end  color-->


              <!--              start    array-->
              <el-form-item :label="item.text" v-if="item.type=='ARRAY'">
                <el-button type="primary" icon="el-icon-plus" circle size="mini"
                           @click="handlerModuleAddParams(module.data,item.variable)"/>
                <el-table  :data="module.data[item.variable]" row-key="id" border fit highlight-current-row style="width: 100%">
                    <el-table-column v-for="(child, index) in item.child" :key="index" align="center" :label="child.text"
                                     :width="child.type=='STRING'||child.type=='IMAGE'||child.type=='URL'?'250':'150'">

                      <template slot-scope="scope">
                        <!-- 数据编辑框 字符串 url-->
                        <el-input v-if="child.type=='STRING'||child.type=='URL'" type="text" v-model="scope.row[child.variable]"/>

                        <el-input v-if="child.type=='NUMBER'" type="number" v-model="scope.row[child.variable]"/>
                        <el-switch v-if="child.type=='BOOLEAN'" v-model="scope.row[child.variable]" active-color="#13ce66" inactive-color="#ff4949"/>

                        <el-tooltip class="item" v-else-if="child.type=='IMAGE'" placement="left">
                          <div slot="content" v-if="scope.row[child.variable]">
                            <img class="tooltip-img" :src="scope.row[child.variable]" />
                          </div>
                          <el-input type="text" v-model="scope.row[child.variable]">
                            <el-button slot="append" icon="el-icon-search" @click="handleOpenImage(scope.row,child.variable)">图片</el-button>
                          </el-input>
                        </el-tooltip>
                        <!-- 颜色 -->
                        <el-color-picker v-else-if="child.type=='COLOR'" v-model="scope.row[child.variable]"></el-color-picker>

                        <el-select v-if="child.type=='SELECT'" v-model="scope.row[child.variable]" placeholder="请选择">
                          <el-option v-for="(it) in child.child"
                                     :key="it.value" :label="it.text" :value="it.value"/>
                        </el-select>

                      </template>
                    </el-table-column>
                    <el-table-column align="center" width="50" label="删除">
                      <template slot-scope="scope">
                        <el-button @click.native.prevent="$delete(module.data[item.variable],scope.$index)" type="danger" size="mini" icon="el-icon-delete" circle></el-button>
                      </template>
                    </el-table-column>
                </el-table>
              </el-form-item>
<!--              end     array-->




            </div>

          </div>
       </el-form>
     </el-col>
   </el-row>

    <FileUpload :show.sync="fileDialog" :result="fileResult" />
  </div>
</template>
<script>
import FileUpload from '@/components/FileUpload'
export default {
  name: 'Page',
  components:{FileUpload},
  data(){
    return{
      fileDialog:false,
      fileResult:Function,
      selectModule:'',
      modules:[],
      data:{},
      selectIndex:-1,
      module:{}
    }
  },
  created() {
    this.initData();
  },

  methods:{
    initData(){
      this.$api.get('/api/design/page/'+this.$route.query.id).then(res=>{
        this.data=res.data;
      })
      this.$api.get('/api/design/module',{page:1,size:2000}).then(res=>{
        this.modules=res.data
      })
    },
    //添加组件,获取组件数据
    handlerAddModule(id){
      if(!id){
        this.$api.error('请先选择组件')
        return ;
      }
      this.$api.get('/api/design/module/'+id).then(res=>{
        let data={
          pageId:this.$route.query.id,
          moduleId:res.data.id,
          sort:this.data.list.length,
          variable:res.data.variable,
          name:res.data.name,
          module:{ name:res.data.name,list:res.data.list},
          data:{}
        }
        this.$set(this.data.list,this.data.list.length,data)
      })
    },
    //选中了一条模板组件
    handlerSelectItem(item,index){
      this.selectIndex=index;
      this.module=item;
    },
    //添加数据
    handlerModuleAddParams(item,variable){
      if(!item)  item={}
      if(!item[variable])item[variable] = [];
      this.$set(item[variable],item[variable].length,{})
      this.$set(this.module,'update',new Date().getTime())
    },
    //打开图片上传
    handleOpenImage(item,variable){
      this.fileResult=function (rows){
        this.$set(item,variable,rows[0])
      }
      this.fileDialog=true;
    },
    //提交
    handleSubmit(){
      this.$api.put('/api/design/page',{action:'detail'},this.data).then(res=>{

      })
    },
    handlerModuleSort(){
      this.data.list.sort(function (a,b){
        return a.sort-b.sort;
      })
    }

  }
}
</script>
<style lang="stylus">
.page-detail{
  ul,li {
    list-style-type none;
    list-style none
    padding 0
    margin 0
  }
  .module{
    .item.current{
      background-color: #f1f1f1
      box-shadow:0px 2px 5px #ccc
    }
    .item:hover{
      .remove {
        display block
      }
    }
    .item {
      margin 10px
      position relative
      background-color white;
      width:98%
      .remove{
        position: absolute;
        right: 10px;
        top: 28px;
        font-size: 23px;
        color: red;
        display none
      }


      .sort {
        max-width 63px
        margin: 10px;
        .el-input__inner {
          padding: 5px;
          text-align: center;
        }
      }
      .name{
        padding: 10px
        width 100%;
        p{
          text-align right;
          font-size small;
        }
        .el-input__inner {
          text-align: left;
          border none
        }
      }
    }
  }
  .page-top{
    display: flex;
    padding: 20px;
    border-bottom: 1px solid #ccc;
    box-shadow: 0px 1px 5px #ccc;

    .el-form-item{
      margin-bottom 0
    }
  }
}
</style>
